<template>
  <!--  <div :class="['card-box', border ? 'border-box' : '']">-->
  <el-dialog :visible.sync="visible" append-to-body title="选择角色" top="5vh" width="800px">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" class="search-form"
             label-suffix="：" label-width="100px" size="small">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="queryParams.name" clearable placeholder="请输入角色名称" @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" type="info" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <a-table rowKey="id" bordered :columns="columns" :data-source="this.dataList" :pagination="false" :scroll="{y: 280}"
             :row-selection="{type:selectType,selectedRowKeys: selectedKeys, onChange: handleSelectionChange}">
      <template slot="RoleType" slot-scope="text">
        <dict-tag :options="localDict.role_type" :value="text" show-label/>
      </template>
      <template slot="RoleStatus" slot-scope="text">
        <dict-tag :options="localDict.role_status" :value="text"/>
      </template>
      <template slot="RoleScope" slot-scope="text">
        <dict-tag :options="localDict.role_scope" :value="text" show-label/>
      </template>
    </a-table>
    <pagination v-show="pageParam.total>0" :limit.sync="pageParam.pageSize" :page-size="pageParam.pageSize"
                :page-sizes="pageParam.options" :page.sync="pageParam.pageNum" :total="pageParam.total"
                @pagination="getList"/>
  </el-dialog>
</template>

<script>

import {list} from "@/api/base";
import {getStaticData} from "@/api/common";

export default {
  name: "SelectRoleCard",
  dicts: [],
  components: {},
  props: {
    border: Boolean,
    single: {type: Boolean, default: false},
    pageSize: {type: Number, default: 5},
    showSearch: {type: Boolean, default: false},
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      visible: false,
      baseUrl: '/system/role/',
      columns: [
        {title: '角色名称', dataIndex: 'name', width: '120PX', ellipsis: true},
        {title: '角色类型', dataIndex: 'type', width: '120px', scopedSlots: {customRender: 'RoleType'}},
        {title: '角色状态', dataIndex: 'status', width: '150px', scopedSlots: {customRender: 'RoleStatus'}},
        {title: '数据权限', dataIndex: 'dataScope', width: '150px', scopedSlots: {customRender: 'RoleScope'}},
      ],
      dataList: [],
      tableShow: true,
      pageParam: {
        total: 0,
        pageNum: 1,
        pageSize: 5,
        options: [5, 10, 15]
      },
      queryParams: {
        mobile: undefined,
        name: undefined,
      },
      // 选中数组
      selectedKeys: [],
      selectedRows: [],
      localDict: {
        role_type: [],
        role_scope: [],
        role_status: [],
      },
    };
  },
  computed: {
    selectType() {
      return this.single ? 'radio' : 'checkbox'
    }
  },
  created() {
    this.getLocalDict()
  },
  methods: {
    async getLocalDict() {
      await getStaticData('system-role-type').then(res => {
        this.localDict.role_type = res.data
      })
      await getStaticData('system-role-scope').then(res => {
        this.localDict.role_scope = res.data
      });
      await getStaticData('system-status').then(res => {
        this.localDict.role_status = res.data
      })
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      list(this.baseUrl, {
        ...this.queryParams,
        pageNum: this.pageParam.pageNum,
        pageSize: this.pageParam.pageSize
      }).then(response => {
          this.dataList = response.rows;
          this.pageParam.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.pageParam.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.selectedKeys = [];
      this.selectedRows = [];
      this.pageParam.pageSize = this.pageSize
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selectedKeys, selectedRows) {
      this.selectedKeys = selectedKeys;
      const preSelected = this.selectedRows.filter(item => selectedKeys.includes(item.id) && selectedRows.every(row => row.id !== item.id));
      this.selectedRows = [...preSelected, ...selectedRows];
    },
  }
};
</script>
<style lang="scss" scoped>
.border-box {
  border: 1px solid #DEDEDE;
  padding: 5px;
}

.form-box {
  .btns {
    text-align: right;
  }
}
</style>
